<!-- 登陆页面 -->
<template>
  <div class='login'>
    <el-form :model="LoginData"
             status-icon
             label-width="100px"
             class="demo-ruleForm">
      <el-form-item label="用户名"
                    prop="username">
        <el-input v-model="LoginData.username"
                  autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="密码"
                    prop="password">
        <el-input type="password"
                  v-model="LoginData.password"
                  autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button>登录</el-button>
        <el-button>重置</el-button>
      </el-form-item>
    </el-form>

    <img src="@/assets/images/ground.png">
    <img src="@/assets/images/cloud1.png"
         class="img-1">
    <img src="@/assets/images/cloud2.png"
         class="img-2">
    <img src="@/assets/images/cloud2.png"
         class="img-3">
    <img src="@/assets/images/cloud2.png"
         class="img-4">
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      LoginData: {
        username: '你好啊',
        password: '123456',
      },
    }
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {},
  beforeCreate() {}, //生命周期 - 创建之前
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  beforeMount() {}, //生命周期 - 挂载之前
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="less">
.login {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #e5e5e5;
  .el-form {
    padding-right: 25px;
    padding-top: 20px;
    text-align: center;
    width: 500px;
    position: absolute;
    left: 35%;
    top: 200px;
    z-index: 1;
    border-radius: 20px;
    // box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.2);
    .el-form-item {
      margin-left: -20px;
      .el-button {
        color: black;
        border: 0px;
        background-color: rgba(255, 255, 255, 0.5);
      }
      .el-button:focus,
      .el-button:hover {
        border-color: #c6e2ff;
        background-color: #ecf5ff;
      }
      .el-input__inner {
        background-color: rgba(255, 255, 255, 0.5);
      }
    }
  }
  img {
    margin-left: -552px;
    position: absolute;
    left: 50%;
    bottom: 0;
  }
  .img-1 {
    position: absolute;
    left: 29%;
    top: 0;
  }
  .img-2 {
    position: absolute;
    left: 50%;
    top: 0;
  }
  .img-3 {
    position: absolute;
    left: 90%;
    top: 10%;
  }
  .img-4 {
    position: absolute;
    left: 110%;
    top: 0;
  }
}
</style>